<template>
	<view class="module-box demand-box">
		<view class="acea-row row-middle row-between">
			<view class="module-title">我的二手闲置</view>
			<view class="demand-num" v-if="needsList.length>0">{{demandIdx+1 || 0}} / {{needsList.length || 0}}</view>
		</view>
		<view class="demand-swiper">
			<swiper class="swiper-box" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
				@change="needsSwiperChange">
				<swiper-item class="swiper-item" v-for="(item,index) in needsList" :key="index"
					@click="toDetails(item)">
					<view class="swiper-item">
						<view class="item-center" @click="toDetail">
							<view class="acea-row cc" style="flex-wrap: nowrap;">
								<img class='item-img' :src="item.images?item.images.split(',')[0] : noImageShow" alt="">
								<view class="content-main">
									<p>信息标题：{{item.title}}</p>
									<p>信息类目：{{item.categorySonName || ''}}</p>
									<p>商品数量：{{item.product?item.products.length : 0}}</p>
									<p>地址：{{item.address || ''}}</p>
								</view>
							</view>
							<!-- <span>审核中</span> -->
						</view>
					</view>

				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		getSecondhandListApi
	} from "@/api/api.js";
	import {
		unusedListOnline
	} from '@/api/unused.js'
	// import handle from '@/pages/releases/components/hand.vue'
	export default {
		components: {
			// handle
		},
		data() {
			return {
				demandIdx: 0, //我的需求当前下标
				needsList: [],
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // 浏览信息头像数组
				onList: [],
				isReward: false,
				isContact: false,
				noImageShow:this.$noImageShow
			}
		},

		mounted() {
			this.getSecondhandList();
			// console.log(handle)
		},

		methods: {
			toDetails(item) {
				uni.navigateTo({
					url: '/pages/details/unused/unused?mind= 1&id=' + item.id
				})
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/details/shopRent/shopRent'
				})
			},
			needsSwiperChange(e) {
				// console.log(e)
				this.demandIdx = e.detail.current;
			},
			async getSecondhandList() {
				try {
					let res = await unusedListOnline({
						page: 1,
						limit: 30
					});
					this.needsList = res.data.list;
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss">
	.module-box {
		background: #ffffff;
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 26rpx 26rpx;
		padding: 36rpx;

		.module-title {
			padding-left: 18rpx;
			position: relative;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);

			&::after {
				display: block;
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -15rpx;
				width: 6rpx;
				height: 30rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 34, 46, 1);

			}
		}
	}

	.item-center {
		display: flex;
		justify-content: space-between;
		margin-top: 36rpx;
		padding-bottom: 40rpx;
		border-bottom: 2rpx solid rgba(238, 238, 238, 1);

		.acea-row {
			display: flex;
			align-items: center;

			.item-img {
				width: 176rpx;
				height: 144rpx;
				border-radius: 10rpx;
				margin-right: 18rpx;
			}

			.content-main {
				font-size: 24rpx;
				max-width: 435rpx;
				font-weight: 400;
				line-height: 20px;
				color: rgba(128, 128, 128, 1);

				p {
					margin: 0;
					padding: 0;
				}
			}
		}

		span {
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
		}
	}

	// 我的需求
	.demand-box {
		.demand-num {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(212, 212, 229, 1);
		}

		.demand-swiper {
			width: 100%;
			min-height: 200rpx;

			.swiper-box,
			.swiper-item {
				width: 100%;
				height: 280rpx;
			}

			// 需求图片及信息
			.demand-info {
				margin-top: 30rpx;
				position: relative;

				.demand-info-tip {
					position: absolute;
					left: 0px;
					top: 0px;
					width: 66rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 0rpx 10rpx 0rpx 10rpx;
					background: rgba(67, 207, 124, 1);
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;

				}

				image {
					display: block;
					margin: 0;
					width: 236rpx;
					height: 210rpx;
					border-radius: 10rpx;
				}

				.demand-info-l {
					width: calc(100% - 236rpx - 20rpx);
					height: 210rpx;

					.info-tit {
						width: 100%;
						margin-bottom: 8rpx;
					}

					.info-money {
						width: 100%;
						margin-bottom: 8rpx;

						.sale-num {
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(128, 128, 128, 1);
							margin-right: 6rpx;
						}

						.rent-box {
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(238, 33, 45, 1);

							text {
								font-size: 36rpx;
								font-weight: 700;
								color: rgba(238, 33, 45, 1);
							}
						}

						.transfer-box {
							margin-left: 18rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(56, 56, 56, 1);

							text {
								font-weight: 700;
							}
						}
					}

					.advantage-box {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);

						.advantage {
							// width: 104px;
							padding: 0 12rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 4px;
							background: rgba(255, 232, 234, 1);
							letter-spacing: 0.4rpx;
							margin-left: 14rpx;
							margin-bottom: 10rpx;
							white-space: nowrap;
						}
					}
				}
			}

			// 适合场所

			.suitable-box {
				margin-top: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(82, 104, 139, 1);
				padding-bottom: 30rpx;
				border-bottom: 1px solid rgba(238, 238, 238, 1);

				.suitable {
					display: inline-block;
					letter-spacing: 0.4rpx;
					padding: 10rpx;
					border-radius: 4rpx;
					background: rgba(248, 249, 253, 1);
					margin-left: 12rpx;
					white-space: nowrap;
				}
			}

			// 浏览咨询统计
			.visit-box {
				margin-top: 30rpx;
				padding: 30rpx 0;
				border-top: 1px solid rgba(238, 238, 238, 1);

				.visit-advtar {
					width: 40%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}

				.visit-l {
					width: 60%;
					height: 46rpx;

					.visit-num {
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(166, 166, 166, 1);
					}
				}

			}

			// 匹配信息
			.matching-box {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
</style>